
import { CSSProperties, useEffect, useState } from 'react';
import styled from 'styled-components';
import { Button, Modal, Select, Tabs } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import type { TabsProps } from 'antd';

// import { DataViewApplication } from 'data-viewer';
import { CategoryList, DataCategoryList } from '../../components';
import { AddDataSourceDialog, DataValuesObjectPanel, DataValuesDomainPanel, DataSourceCategoryTree } from './components';
import { ConnectorDatabaseType, ConnectorDataSource, DataSource } from '../../services';
import { DatabasePanel } from './components/storage';

export const DataValuesViewerPage = (props: { style?: CSSProperties }) => {

    const [dataSource, setDataSource] = useState<DataSource | null>(null);

    const [connectorDType, setConnectorDType] = useState<ConnectorDatabaseType | null>(null);

    const [connectorDataSource, setConnectorDataSource] = useState<ConnectorDataSource | null>(null);

    const [domainIdentifier, setDomainIdentifier] = useState<string | null>(null);

    const [objectIdentifier, setObjectIdentifier] = useState<string | null>(null);

    const [table, setTable] = useState<string | null>(null);

    const [viewModel, setViewModel] = useState<string>('storage');

    const [version, setVersion] = useState<number>(0);

    const refreshDomain = async (domain: string) => {

    };

    useEffect(() => {
        if (dataSource && dataSource.storage_options && dataSource.storage_options != '') {
            let ds: ConnectorDataSource = {
                database_type: dataSource.storage_type,
                ...JSON.parse(dataSource.storage_options),
                id: dataSource.id,
            };
            setConnectorDType(dataSource.storage_type as any);
            setConnectorDataSource(ds);
        } else {
            setConnectorDType(null);
            setConnectorDataSource(null);
        }
    }, [dataSource]);

    return (
        <Container style={props.style}>
            <DataSourceCategoryTree
                style={{
                    width: '220px',
                    minWidth: '220px',
                    borderRight: '1px solid #DEDEDE',
                    backgroundColor: '#FFFFFF',
                }}
                viewModel={viewModel}
                onViewModelChange={async (v) => {
                    setViewModel(v);
                }}
                dataSource={dataSource}
                onDataSourceSelected={async (dataSource) => {
                    setDataSource(dataSource);
                }}
                onDomainSelected={async (domainIdentifier) => {
                    setDomainIdentifier(domainIdentifier);
                    setObjectIdentifier(null);
                }}
                onSelected={async (key, item) => {
                    //
                    if (viewModel === 'storage') {
                        setTable(key);
                    } else {
                        setDomainIdentifier(null);
                        setObjectIdentifier(key);
                    }
                }}
                version={version}
            ></DataSourceCategoryTree>
            {
                dataSource ?
                    (
                        viewModel === 'domain' ? (
                            domainIdentifier || objectIdentifier ?
                                (
                                    <>
                                        <DataValuesObjectPanel
                                            style={{
                                                flex: 1,
                                                display: domainIdentifier ? 'none' : undefined
                                            }}
                                            dataSource={dataSource}
                                            objectIdentifier={objectIdentifier}
                                        ></DataValuesObjectPanel>
                                        <DataValuesDomainPanel
                                            style={{
                                                flex: 1,
                                                display: objectIdentifier ? 'none' : undefined
                                            }}
                                            dataSource={dataSource}
                                            domainIdentifier={domainIdentifier}
                                            onDomainChange={async (domainIdentifier: string) => {
                                                // await refreshDomain(domainIdentifier);
                                            }}
                                        ></DataValuesDomainPanel>
                                    </>
                                ) : (
                                    <EmptyContainer>
                                        请选择域！
                                    </EmptyContainer>
                                )
                        ) : (
                            connectorDataSource && <DatabasePanel dataSource={connectorDataSource} table={table}></DatabasePanel>
                        )
                    ) : (
                        <EmptyContainer>
                            请选择数据源！
                        </EmptyContainer>
                    )
            }
        </Container>
    );
}

const Container = styled.div`
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: row;
`;

const Left = styled.div`
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: row;
`;

const EmptyContainer = styled.div`
    flex: 1;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size:12px;
`;